<template>
	<view class='item'>
		<view class='title acea-row row-between-wrapper'>
			<view class="acea-row row-middle">
				<view>{{item.createTime}}</view>
			</view>
			<view class='font_color'>{{item.orderStatus}}</view>
		</view>
		<view class='item-info  disp flex-row center row-top' v-for="(items,index) in item.orderInfoList" :key="index">
			<view class='pictrue'>
				<image :src='items.image'></image>
			</view>
			<view class='mid_right flex1 uni-ml-8'>
				<view class=" text acea-row row-between">
					<view class='name line2 flex1'>{{items.storeName}}</view>
					<view class='normal'>
						<view>￥{{items.price}}</view>
						<view>{{items.cartNum}}人报名</view>
					</view>
				</view>
				<view class="course_item disp flex-row between center uni-mt-6">
					<view class="course">课程</view>
					<view class="next">5天少年特训营</view>
				</view>
				<!-- 营期SKU信息 -->
				<view class="course_item disp flex-row between center uni-mt-6">
					<view class="course">营期</view>
					<view class="next">2023-06-25——2023-07-07</view>
				</view>
				<view class="yingqi disp flex-row between center uni-mt-6">
					<view class="left_p disp flex-row center">
						<view class="date_info basic-label d4141 fs20 ">定金</view>
						<view class="money uni-ml-6">¥500</view>
					</view>
					<view class="left_p disp flex-row center">
						<view class="date_info basic-label d4141 fs20">尾款</view>
						<view class="money uni-ml-6">¥2300</view>
					</view>
				</view>
			</view>
		</view>
		<view class='totalPrice'>
			共{{item.totalNum}}个营地，总金额<text class='money'>￥{{item.payPrice}}</text>
		</view>
	</view>

</template>

<script>
	//订单头部信息
	export default {
		props: {
			item: {}
		},
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	
	.my-order .list .item {
		background-color: #fff;
		border-radius: 14rpx;
		margin-bottom: 14rpx;
	}
	
	.my-order .list .item .title {
		height: 84rpx;
		padding: 0 24rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
	}
	
	.my-order .list .item .title .sign {
		font-size: 24rpx;
		padding: 0 13rpx;
		height: 36rpx;
		margin-right: 15rpx;
		border-radius: 18rpx;
		@include coupons_border_color(theme);
		@include main_color(theme);
	}
	
	.my-order .list .item .item-info {
		padding: 0 24rpx;
		margin-top: 22rpx;
	}
	
	.my-order .list .item .item-info .pictrue {
		width: 200rpx;
		height: 200rpx;
	}
	
	.my-order .list .item .item-info .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 14rpx;
	}
	
	.my-order .list .item .item-info .text {
		font-size: 28rpx;
		color: #999;
	}
	
	.my-order .list .item .item-info .text .name {
		color: #282828;
	}
	
	.my-order .list .item .item-info .text .money {
		text-align: right;
	}
	
	.font_color {
		@include main_color(theme);
	}
	
	.my-order .list .item .totalPrice {
		font-size: 26rpx;
		color: #282828;
		text-align: right;
		margin: 27rpx 0 0 30rpx;
		padding: 0 30rpx 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.money {
		font-size: 28rpx;
		font-weight: bold;
		@include price_color(theme);
	}
	
	.my-order .list .item .bottom {
		height: 107rpx;
		padding: 0 30rpx;
	}
	
	.my-order .list .item .bottom .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		border-radius: 50rpx;
		font-size: 27rpx;
	}
	
	.my-order .list .item .bottom .bnt.cancelBnt {
		border: 1rpx solid #ddd;
		color: #aaa;
	}
	
	.my-order .list .item .bottom .bnt~.bnt {
		margin-left: 17rpx;
	}
	
	
</style>